<template>
	<ComCell title="" class="field-detail" ref="target" :required="required" :hiddenLabel="hiddenLabel">
		<template #title>
			<ComIcon v-if="!hiddenIcon" :icon="icon || 'EachApp_wenben'" :size="16"></ComIcon>
			{{ name }}：
		</template>
		<!-- 文本 --> 
		<div class="field-detail-content"  :class="{ 'field-component': !readonly,'field-border':border }">
			<slot></slot>
		</div>
	</ComCell>
</template>

<script setup lang="ts">
import { onClickOutside } from "@vueuse/core";
const target = ref(null)
const props = defineProps({
	icon: {
		//字段图标
		type: String,
		default: ""
	},
	name: {
		//字段名称
		type: String,
		default: ""
	},
	required: {
		//是否显示星号
		type: Boolean,
		default: false
	},
	hiddenLabel: {
		//隐藏label
		type: Boolean,
		default: false
	},
	hiddenIcon: {
		//隐藏Icon
		type: Boolean,
		default: false
	},
	readonly: {
		// 鼠标移动到内容上是否显示背景色
		type: Boolean,
		default: false
	},
	border: {
		type: Boolean,
		default: false
	},
	status:{
		type: String,
	},
	visible:{ //内容有弹出框的情况，弹出框展示的时候不切换状态为view
		type: Boolean,
		default: false
	}
});
const emit = defineEmits(['outClick'])
onClickOutside(target, (event) => {
	if(props.status === 'edit' && !props.visible){
		emit('outClick')
	}
});
</script>

<style scoped lang="scss">
.field-detail {
	min-height: 36px;
	padding: 4px 20px;
}
.field-border{
	:deep(.shadow-border) {
		border-radius: 4px;
		box-shadow: rgba(17, 17, 26, 0.05) 0px 1px 0px, rgba(17, 17, 26, 0.1) 0px 0px 8px;
		&:focus{
			border: 1px solid #165dff;
		}
	}
}
.field-component {
	:deep(.arco-input-wrapper){
		// background-color: transparent;
		padding: 0 6px;
	}
	:deep(.view) {
		width: max-content;
		padding: 4px 6px;
		line-height: 1;
		border-radius: 4px;
		&:hover {
			background-color: #f2f2f2;
		}
	}
	:deep(.view-tag){
		padding: 0;
		cursor: default;
	}
}
.field-detail-content {
	display: flex;
	width: 100%;
	gap: 4px;
	align-items: center;
	justify-content: space-between;
	&:hover {
		.edit-icon {
			opacity: 1;
		}
	}
	.edit-icon {
		color: #9999b1;
		opacity: 0;
		cursor: pointer;
		padding: 4px;
		line-height: 1;
		border-radius: 4px;
		&:hover {
			background-color: #f2f2f2;
		}
	}
}
</style>
